<template name="shopCard">
	<view class="shopCard">
		<image class="brandImg" :src="shopInfo.logo?shopInfo.logo:'../../static/loding.png'" mode="" :data-id="shopInfo.id" data-url="shopDetail" @tap="toShop"></image>
		<view class="cardInfo" data-url="shopDetail" :data-id="shopInfo.id" @tap="toShop">
			<text class="shopName">{{shopInfo.name}}</text>
			<text class="shopAddress">{{shopInfo.address}}</text>
		</view>
		<!-- #ifndef H5 -->
		<view class="shopBtn">
			<image src="@/pagesA/static/address.png" mode="" :data-zb="shopInfo.shopCoordinate" @tap="toShopMap"></image>
			<image src="@/pagesA/static/tel.png" mode="" :data-tel="shopInfo.phone"  @tap="callNumber"></image>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import Request from "@/sdk/pocky-request/index.js";
	import COMM from "@/common/common.js";
    // vuex 导入
    import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
        name: 'shopCard',
        // 计算属性
        computed: {
            // ...mapState({
            //     stateinfo:stata=>stata.file.stateinfo
            // }),
            // ...mapGetters({
            //     stateinfo:stata=>stata.file.stateinfo
            // })
        },
        // 传递参数
		props: {
			shopInfo:{
				type:Object,
				default:()=>{
					return {
						id:0,
						logo:'',
						name:'',
						address:'',
						shopCoordinate:'',
						phone:''
					}
				}
			}
        },
        // 自身参数
        data() {
            return {
               apiShopInfo:null
            }
        },
        // 方法
		methods: {
           
			// 拨打电话
			callNumber() {
				COMM.callPhone(this.shopInfo.phone);
			},
			// 导航至店铺
			toShopMap(){
				COMM.toMapBylng(this.shopInfo)
			},
			getData(){				
				this.$store.dispatch("apiGetShopDetail",{
					id:this.shopInfo.id,
					userId:0
				}).then(res=>{
					this.apiShopInfo=res.data.data
				})
			},
			toShop(){
				uni.setStorageSync("toShop",this.apiShopInfo)
				this.toPage({
					url:'shopDetail',
					id:this.apiShopInfo.id
				})
			}
        },
        // created声明周期
        created() {
			setTimeout(()=>{
				this.getData()
			},1000)
        },

	}
</script>

<style lang="less" scoped>

	.shopCard{
		background-color: #FFFFFF;
		padding: 30upx 28upx;
		border-bottom: 13upx solid #f4f4f4;
		
		display: flex;
		align-items: center;
		.brandImg{
			width: 100upx;
			height: 100upx;
			margin-right: 30upx;
		}
		.cardInfo{
			flex: 1;
			display: flex;
			flex-direction: column;
			.shopName{
				font-size: 26rpx;
				color: #202932;
			}
			.shopAddress{
				margin-top: 14upx;
				font-size: 24rpx;
				color: #838890;
			}
		}
		.shopBtn{
			flex-shrink: 0;
			display: flex;
			image{
				width: 40upx;
				height: 40upx;
				margin-left: 36upx;
			}
		}
	}

</style>
